<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <span>布布的个人档案</span>
        </div>
      </template>
      <div class="profile-content">
        <div class="avatar-section">
          <el-avatar :size="100" src="https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif" />
          <h3>布布熊</h3>
        </div>
        <div class="info-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="昵称">布布</el-descriptions-item>
            <el-descriptions-item label="年龄">2岁</el-descriptions-item>
            <el-descriptions-item label="性别">男孩子</el-descriptions-item>
            <el-descriptions-item label="生日">2022-01-01</el-descriptions-item>
            <el-descriptions-item label="爱好">玩玩具、吃零食</el-descriptions-item>
            <el-descriptions-item label="特长">卖萌</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

.profile-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.avatar-section {
  text-align: center;
}

.avatar-section h3 {
  margin-top: 10px;
  color: #2c3e50;
}

.info-section {
  width: 100%;
}
</style> 